<template>
    <!-- 选择药企弹窗 -->
    <Modal
        v-model="visible"
        title="药企选择弹窗"
        width="1100px"
        class="drugmanagement-departmentdrug-add-choose">
        <div class="Institutionalregistration">
            <div class="container">
                <header style="paddingBottom: 20px;">
                    <div class="search">
                        <newfourLevelLinkage
                            @changeProvince="changeProvince"
                            @changeCity="changeCity"
                            @changeArea="changeArea"
                            :province="modalFilterObj.provinceCode"
                            :city="modalFilterObj.cityCode"
                            :area="modalFilterObj.areaCode"
                        ></newfourLevelLinkage>
                    <Input v-model.trim="modalFilterObj.searchKey" clearable style="width: 260px" placeholder="药企名称"/>
                        <Button style="width:51px;height:35px;"
                            type="primary"
                            @click="modalSearch()"
                            icon="ios-search"
                        ></Button>
                        <Button @click="modalReset" icon="icon-gengxin" style="width:51px;height:35px;">
                          <i class = "iconfont icon-gengxin" style="font-size:14px;"></i>
                        </Button>
                    </div>
                </header>
                <div class="list">
                    <Table
                        border
                        :columns="modalColumn"
                        :data="modalData"
                        stripe
                        :loading="modalTableLoading"
                        @on-row-click="onRowClick"
                        no-filtered-data-text="未查询到符合条件的记录"></Table>
                </div>
				<div class="page">
					<Page :total="modalCount" :current='modalFilterObj.pageNo' :page-size="modalFilterObj.pageSize" show-total show-elevator @on-change="modalPageChange"/>
				</div>
            </div>
        </div>
        <div class="btn-group">
            <Button class="save" type="primary" :disabled="currentChoose.id !== 0 && !currentChoose.id"  @click="handleModalSave">确认选择</Button>
        </div>
    </Modal>
</template>

<script>
import api from "@/api/commonApi";
import newfourLevelLinkage from "@/components/newfourLevelLinkage";
const modalFilterObj = {
    provinceCode: null,
    cityCode: null,
    areaCode: null,
    pageNo: 1,
    pageSize: 10,
    searchKey: '',
	hospitalType: 3,
}
export default {
	components: {
		newfourLevelLinkage
	},
	model: {
		prop: "visible",
		event: "change"
	},
	props: {
		visible: Boolean,
		onCancel: () => {},
		onOk: () => {}
	},
	created() {
	},
	data() {
		return {
		modalFilterObj: this.deepClone(modalFilterObj),
		modalTableLoading: false,
		currentChoose: {},
		modalColumn: [
			{
			title: "机构名称",
			key: "orgName",
			align: "center",
			// width: 300,
			render: (h, params) => {
				let name = params.row.orgName;
				return h(
				"p",
				{
					style: {
					display: "inline-block",
					width: params.column._width * 0.8 + "px",
					overflow: "hidden",
					textOverflow: "ellipsis",
					whiteSpace: "nowrap"
					}
				},
				name
				);
			}
			},
			{
			title: "机构地址",
			key: "hosAddr",
			align: "center"
			},
			{
			title: "联系人",
			key: "linkman",
			align: "center",
			// width: 150,
			render: (h, params) => {
				let row = params.row;
				let name = "";
				let style = {};
				if (Boolean(row.linkman)) {
				name = row.linkman;
				} else {
				name = "暂无";
				style.color = "gray";
				}

				return h(
				"span",
				{
					style
				},
				name
				);
			}
			},
			{
			title: "联系电话",
			key: "linkmanTelephone",
			align: "center",
			// width: 150,
			render: (h, params) => {
				let row = params.row;
				let name = "";
				let style = {};
				if (Boolean(row.linkmanTelephone)) {
				name = row.linkmanTelephone;
				} else {
				name = "暂无";
				style.color = "gray";
				}
				return h(
				"span",
				{
					style
				},
				name
				);
			}
			},
			{
				title: '选择',
				key: 'id',
				width: 70,
				align: 'center',
				render: (h, params) => {
				let flag = false;
				if (this.currentChoose.id === params.row.id) {
					flag = true
				} else {
					flag = false
				}
				let self = this
				return h('div', [
					h('Radio', {
					props: {
						value: flag
					},
					on: {
						'on-change': () => {
						self.currentChoose = params.row;
						}
					}
					})
				])
				}
			},
		],
		modalPageList: [
			{
			value: 10,
			label: 10
			},
			{
			value: 20,
			label: 20
			},
			{
			value: 50,
			label: 50
			}
		],
		}
	},
	mounted() {
	},
	methods: {
		onRowClick(n, o) {
			this.currentChoose = n;
		},
		handleChange() {
			this.$emit("change", [this.fromTime, this.endTime]);
		},
		changeProvince(val) {
			this.modalFilterObj.provinceCode = val;
			this.modalFilterObj.cityCode = null;
			this.modalFilterObj.areaCode = null;
		},
		changeCity(val) {
			is.modalFilterObj.cityCode = val;
			this.modalFilterObj.areaCode = null;
		},
		changeArea(val) {
			this.modalFilterObj.areaCode = val;
		},
		modalSearch() {
			this.modalFilterObj.pageNo = 1
			this.drugCompaniseList()
		},
		modalReset() {
			this.modalFilterObj = this.deepClone(modalFilterObj);
			this.drugCompaniseList()
		},
		handleModalSave() {
			this.onOk && this.onOk(this.currentChoose);
		},
		modalPageChange(index) {
			this.modalFilterObj.pageNo = index;
			this.drugCompaniseList();
		},
		drugCompaniseList() {
			this.modalTableLoading = true;
			this.$axios.post(api.mechanismregList, this.modalFilterObj).then(res => {
				this.modalTableLoading = false;
				if (res.data.code === 1) {
					let ret = res.data.object;
					this.modalData = ret.records;
					this.modalCount = ret.total;
				}
			});
		},
		deepClone(obj) {
			return JSON.parse(JSON.stringify(obj))
		},
	},
	watch: {
		visible(n) {
			this.$emit("change", n);
			this.currentChoose = {};
			if (n) {
				this.modalFilterObj.pageNo = 1;
				this.drugCompaniseList()
			}
		},
		'modalFilterObj.pageSize'() {
			this.drugCompaniseList();
		},
	}
}
</script>

<style scoped lang="less">
.drugmanagement-departmentdrug-add-choose {
    /deep/ .ivu-modal-wrap {
        .ivu-modal-footer {
            display: none;
        }
        .btn-group {
            text-align: center;
            .save {
                width: 100px;
                margin-right: 20px;
            }
            .close {
                margin-left: 20px;
                width: 100px;
            }
        }
        .ivu-table .demo-table-info-row td{
            background-color: #5326e1;
            color: #fff;
        }
    }
}
.page{
	text-align: center;
	margin: 20px 0;
}
</style>